<template>
  <div class="commonBoxmp">
  <TableV2
      ref="tableV2Ref"
    
      :apiFunction="list"
      @selection-change="handleSelectionChange"
      :tableOptions="{
        'header-cell-style': {},
        rowStyle: {
          cursor: 'pointer',
        },
      }"
      :columns="state.columnData"
      showIndex
    >
          <template #tplName="scope">
        <el-link type="primary" @click="handleGoDetail(scope.row)">{{
          scope.row.tplName
        }}</el-link>
      </template>
      <template #tableHeader>
        <div class=" aic w100">
          <el-button type="primary" @click="handleAdd"
            >新增</el-button
          >
             <el-button type="danger"
             v-if="ids.length>0"
              @click="handleDeletes"
            >删除</el-button
          >
          
        </div>
      </template>
      
      
      <template #operation>
        <el-table-column label="操作" fixed="right" 
        width="200"
        align="right">
          <template #default="scope">
        
  <el-button
              size="small"
              type="primary"
              class="mx15"
              @click="handleUpdate( scope.row)"
              >修改</el-button
            >
            <el-button
              size="small"
              type="danger"
              class="mx15"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </template>
    </TableV2>
   
  </div>
 <addOrEdit v-model="centerDialogVisible" :id="tplId" 
 @update="getList"/>
 <AllRight v-model="detailDialogVisible" :id="tplId" 
 @update="getList"/>
</template>

<script setup lang="tsx">
import { ref, reactive, getCurrentInstance, onMounted, watch ,shallowRef, unref} from "vue";

import { ElMessage, ElMessageBox, FormInstance } from "element-plus";
import {
AllRight,AddOrEdit
} from './component/index'
import{
  deletes,
  list
} from './api'
import {
  columns
} from './data'
let centerDialogVisible = shallowRef(false);
const detailDialogVisible = shallowRef(false)
const roleDrawer = shallowRef(false);
const tplId = shallowRef("")
const handleUpdate = (row: any) => {
  tplId.value = row.tplId;
 centerDialogVisible.value = true;

};
const ruleFormRef = ref<FormInstance>();
 const tableV2Ref = ref();
 const handleAdd = () =>{
  centerDialogVisible.value = true;
 }
//查询用户列表
const getList = () => {
    tableV2Ref.value.getList()

};


const handleDeletes = ()=>{
    const dictId = unref(ids).join(",");
  ElMessageBox.confirm('是否确认删除编号为"' + dictId + '"的数据项？')
    .then(function () {
      return deletes(dictId);
    })
    .then(() => {
      ElMessage.success("删除成功");
      getList();
    })
    .catch(function () {});
}
const ids = ref([]);
const handleSelectionChange = (selection: any) => {
  ids.value = selection.map((item: any) => item.tplId);
};
const handleDelete =(row)=>{
    const dictId = row.tplId;
  ElMessageBox.confirm('是否确认删除编号为"' + dictId + '"的数据项？')
    .then(function () {
      return deletes(dictId);
    })
    .then(() => {
      ElMessage.success("删除成功");
      getList();
    })
    .catch(function () {});
}

const state: any = reactive({
  height: 0,
  columnData: columns,
  tableData: [],
});


const handleGoDetail = (row:any) => {
  detailDialogVisible.value = true;
  tplId.value = row.tplId;
};
</script>

<style scoped lang="scss"></style>
